<template>
    <el-form
            ref="formRef"
            :model="api.editState.form"
            :rules="rules"
            class="mx-auto"
            label-width="120px"
            status-icon
            style="width: 600px"
    >

        <el-form-item
                label="上级菜单"
                prop="pid"
        >
            <el-tree-select
                    v-model="api.editState.form.pid"
                    :data="tree"
                    :expand-on-click-node="false"
                    :props="{label:'name'}"
                    :render-after-expand="false"
                    check-strictly
                    class="fill-width"
                    placeholder="上级菜单"
                    value-key="id"
            >
            </el-tree-select>
        </el-form-item>

        <el-form-item
                label="菜单名称"
                prop="name"
        >
            <el-input
                    v-model="api.editState.form.name"
                    clearable
                    placeholder="菜单名称"
            />
        </el-form-item>

        <el-form-item
                label="菜单地址"
                prop="path"
        >
            <el-input
                    v-model="api.editState.form.path"
                    clearable
                    placeholder="菜单地址"
            />
        </el-form-item>

        <el-form-item
                label="菜单顺序"
                prop="sort"
        >
            <el-input-number
                    v-model="api.editState.form.sort"
                    clearable
                    placeholder="顺序"
            />
        </el-form-item>

        <el-form-item
                label="是否显示"
                prop="isShow"
        >
            <el-radio-group
                    v-model="api.editState.form.isShow"
            >
                <el-radio :label="true" border>显示</el-radio>
                <el-radio :label="false" border>不显示</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item
                label="菜单图标"
                prop="icon"
        >
            <i-icon-menu v-model:model-value="api.editState.form.icon"></i-icon-menu>
        </el-form-item>

        <el-form-item class="mb-0">
            <el-button type="primary" @click="onSubmit">{{ api.editState.form.id ? "保存" : "创建" }}</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import {MenuApi} from "~/api/system/menu/menu.api";
import {computed, reactive, ref} from "vue";
import {FormRules} from "element-plus";
import IIconMenu from "~/icesoft/components/icon/IIconMenu.vue";

interface Props {
    api: MenuApi;
}

const {api} = withDefaults(defineProps<Props>(), {});
const formRef = ref();
const rules = reactive<FormRules>({
    pid: [{required: true, message: "请选择菜单上级", trigger: "blur"}],
    name: [{required: true, message: "请输入菜单名称", trigger: "blur"}],
    path: [{required: true, message: "请输入菜单地址", trigger: "blur"}],
    isShow: [{required: true, message: "请选择是否显示", trigger: "blur"}],
    sort: [{required: true, message: "请输入菜单顺序", trigger: "blur"}],
});

const tree = computed(() => {
    let treeData = [];
    treeData.push({
        id: "0",
        name: "顶级",
    });
    api.tableState.dataSource.forEach(item => {
        if (item.pid == "0") {
            treeData.push({
                id: item.id,
                name: item.name,
                pid: item.pid,
            });
        }
    });
    return treeData;
});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.editState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseEdit();
            }
        });
    }
}
</script>

<style lang="scss" scoped>

</style>
